<template>
  <div class="home-wrapper">
    <Head></Head>
    <Mallhead @search="handleSearch"></Mallhead>
    <HeadMenu></HeadMenu>
    <section class="banner-box">
      <img class="banner-img" src="@/assets/home/banner.png" alt="" />
      <div class="login-section">
        <div class="logo">
          <!-- <img src="@/assets/home/color-head.png" alt="" /> -->
        </div>
        <p class="login-section-info">Hi，欢迎来到食品产业平台！</p>
        <div class="login-asgin" v-if="!userName">
          <el-button class="login-btn" size="small" round @click="goRoute('/login')">登录</el-button>
          <el-button class="register-btn" size="small" round @click="goRoute('/register')">注册</el-button>
        </div>
        <el-tabs v-model="activeName" :class="{ 'mt50': userName }">
          <el-tab-pane label="产业焦点" name="chanye">
          </el-tab-pane>
          <el-tab-pane label="平台公告" name="pingtai">
          </el-tab-pane>
        </el-tabs>
        <div class="public-con" v-if="activeName === 'chanye'">
          <div v-for="(item, index) in chanyeList" :key="index" class="info-row">
            <span class="type">{{ item.type }}</span>
            <span class="content">{{ item.content }}</span>
          </div>
        </div>
        <div class="public-con" v-if="activeName === 'pingtai'">
          <div v-for="(item, index) in pingtaiList" :key="index" class="info-row">
            <span class="type">{{ item.type }}</span>
            <span class="content">{{ item.content }}</span>
          </div>
        </div>
      </div>
    </section>
    <Recommend></Recommend>
    <Release></Release>
    <Business></Business>
    <Product></Product>
    <AboutUs></AboutUs>
    <Footer></Footer>
  </div>
</template>

<script>
import Recommend from './components/recommend.vue'
import Release from './components/release.vue'
import Business from './components/business.vue'
import Product from './components/product.vue'
import AboutUs from './components/aboutUs.vue'
export default {
  name: "Home",
  components: {
    Recommend,
    Release,
    Business,
    Product,
    AboutUs
  },
  data() {
    return {
      activeName: "chanye",
      chanyeList: [
        {
          type: '置顶',
          content: '产业互联网平台v2.0版本重磅来袭！'
        },
        {
          type: 'HOT',
          content: '加强餐饮油烟净化器整改 设备定期清洗维护'
        },
        {
          type: '最新',
          content: '加强餐饮油烟净化器整改 设备定期清洗维护'
        },
        {
          type: '推荐',
          content: '加强餐饮油烟净化器整改 设备定期清洗维护'
        }
      ],
      pingtaiList: [
        {
          type: '置顶',
          content: '水平提升月饼包装"轻装上阵"精华设备等舌尖美食'
        },
        {
          type: 'HOT',
          content: '加强餐饮油烟净化器整改 设备定期清洗维护'
        },
        {
          type: '最新',
          content: '加强餐饮油烟净化器整改 设备定期清洗维护'
        },
        {
          type: '推荐',
          content: '加强餐饮油烟净化器整改 设备定期清洗维护'
        }
      ]
    };
  },
  computed: {
    userName() {
      return this.$store.state.xbsgUserInfo.userName;
    },
  },
  mounted() {},
  methods: {
    handleSearch(value) {
      console.log(value);
    },
    goRoute(url) {
      this.$router.push({ path: url });
    }
  },
};
</script>
<style scoped lang='scss'>
@import "@/style/color.scss";
.home-wrapper {
  margin-top: 30px;
}
.banner-box {
  width: 100%;
  position: relative;
  .banner-img {
    width: 100%;
    height: 380px;
  }
  .login-section {
    position: absolute;
    top: 10px;
    right: calc((100vw - 1200px) / 2);
    width: 260px;
    height: 360px;
    background: #FFFFFF;
    opacity: 0.96;
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      width: 70px;
      height: 70px;
      border-radius: 36px;
      margin: 20px 0 10px;
      background: #F5F5F5;
      flex-shrink: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .login-section-info {
      line-height: 20px;
    }
    .login-asgin {
      margin: 10px 0;
      .el-button {
        width: 90px;
      }
      .login-btn {
        background-color: $greenColor;
        color: #fff;
        border: 1px solid $greenColor;
      }
      .register-btn {
        background-color: #fff;
        color: $greenColor;
        border: 1px solid $greenColor;
      }
    }
    .mt50 {
      margin-top: 52px;
    }
    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }
    ::v-deep .el-tabs__active-bar {
      background-color: $greenColor;
    }
    ::v-deep .el-tabs__item {
      height: 30px;
      line-height: 30px;
      color: #666666;
    }
    ::v-deep .el-tabs__item.is-active {
      color: $greenColor;
    }
    .public-con {
      width: 100%;
      padding: 0 20px;
      .info-row {
        margin-bottom: 10px;
        display: flex;
        flex-wrap: nowrap;
      }
      .type {
        flex-shrink: 0;
        font-size: 12px;
        color: $greenColor;
        line-height: 20px;
        padding: 0 4px;
        margin-right: 4px;
        background-color: #EDFAEF;
      }
      .content {
        font-size: 12px;
        line-height: 20px;
        color: #666666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}

</style>
